//
//  BackgroundAndOverlayDemo.swift
//  SwiftUIDemo
//
//  Created by Tilt Wang on 2025/6/25.
//

import SwiftUI

struct BackgroundAndOverlayDemo: View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .frame(width: 100, height: 100, alignment: .center)
            .background(
//                Color.red
//                LinearGradient(
//                    gradient: Gradient(colors: [Color.green, Color.blue]),
//                    startPoint: .topLeading,
//                    endPoint: .bottom
//                )
                Circle()
                    .fill(Color.blue)
            )
            .frame(width: 120, height: 120, alignment: .center)
            .background(
                Circle()
                    .fill(Color.red)
            )
        
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .background(
                Circle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100, alignment: .center)
            )
            .background(
                Circle()
                    .fill(Color.red)
                    .frame(width: 120, height: 120, alignment: .center)
            )
        
        Circle()
            .fill(Color.pink)
            .frame(width: 100, height: 100, alignment: .center)
            .overlay(
                Text("tilt")
                    .font(.largeTitle)
                    .foregroundColor(.purple)
            )
            .background(
                Circle()
                    .fill(Color.purple)
                    .frame(width: 110, height: 110, alignment: .center)
            )
        
        Rectangle()
            .frame(width: 100, height: 100, alignment: .center)
            .overlay(
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 50, height: 50, alignment: .center)
            )
            .background(
                Rectangle()
                    .fill(Color.purple)
                    .frame(width: 150, height: 150, alignment: .center)
            )
        
        Image(systemName: "heart.fill")
            .font(.system(size: 40))
            .foregroundColor(.red)
            .background(
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [Color.green, Color.blue]),
                            startPoint: .topLeading,
                            endPoint: .bottom
                        )
                    )
                    .frame(width: 100, height: 100)
                    .shadow(color: Color.blue.opacity(0.5), radius: 10, x: 0.0, y: 20)
                    .overlay(
                        Circle()
                            .fill(.brown)
                            .frame(width: 35, height: 35)
                            .overlay(
                                Text("5")
                                    .font(.headline)
                                    .foregroundColor(.white)
                            )
                            .shadow(color: Color.blue.opacity(0.5), radius: 10, x: 5.0, y: 5)
                        ,alignment: .bottomTrailing
                    )
            )
    }
}

#Preview {
    BackgroundAndOverlayDemo()
}
